<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>vanila 32 笑脸随鼠标变化</title>
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
     
        <div
            class="container"
            style="
                --face-change-process: 100%;
                --face-change-opacity: 0;

                --eye-right-x: 40%;
                --eye-right-y: 25%;
                --eye-left-x: 60%;
                --eye-left-y: 75%;

                --mouth-top-radius: 10px;
                --mouth-bottom-radius: 100px;
            ">
            <h1 class="title">你要卸载我吗？</h1>
            <div class="face">
                <div class="eyes">
                    <div class="eye left__eye">
                        <div class="pupil"></div>
                    </div>
                    <div class="eye right__eye">
                        <div class="pupil"></div>
                    </div>
                </div>
                <div class="cheeks">
                    <div class="cheek left__cheek"></div>
                    <div class="cheek right__cheek"></div>
                </div>
                <div class="mouth">
                    <div class="tongue"></div>
                    <div class="teeth"></div>
                </div>
            </div>
            <div class="action">
                <button class="left">保留</button>
                <button class="right">卸载</button>
            </div>
        </div>
        <!-- <input type="range" min="0" max="1" step="0.01" value="0" /> -->
    </body>
    <script src="js/index.js"></script>
</html>
